
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>我的打赏图片</title>
<style>
html,body,p,h1,h2,h3,h4,h5,h6,form,input,textarea,select,button,fieldset,legend,img,ul,ol,li,dl,dt,dd,th,td,pre,blockquote{margin:0;padding:0}
html{height:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
body{margin:0;padding:0;font-family:"微软雅黑";font-size:14px;}
img{border:0;}
li{list-style:none;}
a{text-decoration:none;color:#666666;}
.clear:after{content:'.';height:0;clear:both;display:block;visibility:hidden;}
.left{float:left;}
h1,p,h3,h4,h5,h6,ul,li,dl,dt,dd,hr,div,p,form,input,font { margin:0; padding:0; font-weight:normal; text-indent:0; list-style-type:none; }
#foot1{position:absolute;bottom:0;width:100%;height:240px;z-index:99;background:#fff;}
.btn_btn{display:block;border:0;border-radius:10px;cursor:pointer;background:#0ebc05;width:100%;color:#fff;height:30px;line-height:30px;text-align:center;}
.btn_btn1{display:block;border:0;border-radius:10px;cursor:pointer;background:#666;width:100%;color:#fff;height:30px;line-height:30px;text-align:center;}
.foot2{width:100%;height:30px;line-height:30px;position:absolute;top:50px;text-align:center;}
.foot2 p{color:#858383;font-size:16px;}
.foot6{height:30px;line-height:30px;position:absolute;top:80px;width:90%;margin-left:5%;}
.foot6 p{color:#858383;font-size:16px;text-align:center;}
.foot3{width:100%;height:30px;line-height:30px;text-align:center;position:absolute;top:115px;color:#000;}
.foot3 span, .foot4 span{height:30px;line-height:30px;color:#858383;font-weight:bold;}
.btn_money{width:20%;border-radius:10px;text-align:center;height:20px;background:#e6e6e6;color:#0ebc05;}
.foot4{width:100%;height:30px;line-height:30px;text-align:center;position:absolute;top:145px;}
.foot5{width:60%;margin-left:20%;height:40px;line-height:40px;text-align:center;position:absolute;bottom:10px;}
.btn_money2{background:#99CC33;border:0;width:100%;color:#FFFFFF;border-radius:10px;}
#start{color:#0ebc05;}
#end{color:#0ebc05;}
</style>
<script type="text/javascript" src="__PUBLIC__/dashang/js/style.js"></script>
<link rel="stylesheet" href="__PUBLIC__/dashang/css/style.css">

 <script src="__PUBLIC__/layer/layer.js" type="text/javascript"></script>
<script>

$(function(){

  $('.single-slider').jRange({

    from: 0,

    to: 100,

    step: 1,

    scale: [0,25,50,75,100],

    format: '%s',

    width: 300,

    showLabels: true,

    showScale: true

  });

  $('.range-slider').jRange({

    from: 0,

    to: 100,

    step: 1,

    scale: [0,25,50,75,100],

    format: '%s',

    width: 300,

    showLabels: true,

    isRange : true

  });

  
$("#g1").click(function(){

    var aa = $(".single-slider").val();

    
    document.getElementById("e").value = aa;

  });



});

</script>
<script>
  /*jshint multistr:true, curly: false */
/*global jQuery:false, define: false */
/**
 * jRange - Awesome range control
 *
 * Written by
 * ----------
 * Nitin Hayaran (nitinhayaran@gmail.com)
 *
 * Licensed under the MIT (MIT-LICENSE.txt).
 *
 * @author Nitin Hayaran
 * @version 0.1-RELEASE
 *
 * Dependencies
 * ------------
 * jQuery (http://jquery.com)
 *
 **/


(function($, window, document, undefined) {
	'use strict';
    var id="{$id}";
	var jRange = function() {
		return this.init.apply(this, arguments);
	};
	jRange.prototype = {
		defaults: {
			onstatechange: function() {},
			isRange: false,
			showLabels: true,
			showScale: true,
			step: 1,
			format: '%s',
			theme: 'theme-green',
			width: 300,
			disable: false
		},
		template: '<div class="slider-container">\
			<div class="back-bar" onclick="aa()">\
                <div class="selected-bar"></div>\
                <div class="pointer low"></div><div class="pointer-label">123456</div>\
                <div class="pointer high" onclick="aa()"></div><div class="pointer-label">456789</div>\
                <div class="clickable-dummy"></div>\
            </div>\
            <div class="scale"></div>\
		</div>',
		init: function(node, options) {
			this.options       = $.extend({}, this.defaults, options);
			this.inputNode     = $(node);
			this.options.value = this.inputNode.val() || (this.options.isRange ? this.options.from + ',' + this.options.from : this.options.from);
			this.domNode       = $(this.template);
			this.domNode.addClass(this.options.theme);
			this.inputNode.after(this.domNode);
			this.domNode.on('change', this.onChange);
			this.pointers      = $('.pointer', this.domNode);
			this.lowPointer    = this.pointers.first();
			this.highPointer   = this.pointers.last();
			this.labels        = $('.pointer-label', this.domNode);
			this.lowLabel      = this.labels.first();
			this.highLabel     = this.labels.last();
			this.scale         = $('.scale', this.domNode);
			this.bar           = $('.selected-bar', this.domNode);
			this.clickableBar  = this.domNode.find('.clickable-dummy');
			this.interval      = this.options.to - this.options.from;
			this.render();
		},
		render: function() {
			// Check if inputNode is visible, and have some width, so that we can set slider width accordingly.
			if (this.inputNode.width() === 0 && !this.options.width) {
				console.log('jRange : no width found, returning');
				return;
			} else {
				this.domNode.width(this.options.width || this.inputNode.width());
				this.inputNode.hide();
			}

			if (this.isSingle()) {
				this.lowPointer.hide();
				this.lowLabel.hide();
			}
			if (!this.options.showLabels) {
				this.labels.hide();
			}
			this.attachEvents();
			if (this.options.showScale) {
				this.renderScale();
			}
			this.setValue(this.options.value);
		},
		isSingle: function() {
			if (typeof(this.options.value) === 'number') {
				return true;
			}
			return (this.options.value.indexOf(',') !== -1 || this.options.isRange) ?
				false : true;
		},
		attachEvents: function() {
			this.clickableBar.click($.proxy(this.barClicked, this));
			this.pointers.on('mousedown touchstart', $.proxy(this.onDragStart, this));
			this.pointers.bind('dragstart', function(event) {
				event.preventDefault();
			});
		},
		onDragStart: function(e) {
			if ( this.options.disable || (e.type === 'mousedown' && e.which !== 1)) {
				return;
			}
			e.stopPropagation();
			e.preventDefault();
			var pointer = $(e.target);
			this.pointers.removeClass('last-active');
			pointer.addClass('focused last-active');
			this[(pointer.hasClass('low') ? 'low' : 'high') + 'Label'].addClass('focused');
			$(document).on('mousemove.slider touchmove.slider', $.proxy(this.onDrag, this, pointer));
			$(document).on('mouseup.slider touchend.slider touchcancel.slider', $.proxy(this.onDragEnd, this));
		},
		onDrag: function(pointer, e) {
			e.stopPropagation();
			e.preventDefault();

			if (e.originalEvent.touches && e.originalEvent.touches.length) {
				e = e.originalEvent.touches[0];
			} else if (e.originalEvent.changedTouches && e.originalEvent.changedTouches.length) {
				e = e.originalEvent.changedTouches[0];
			}

			var position = e.clientX - this.domNode.offset().left;
			this.domNode.trigger('change', [this, pointer, position]);
		},
		onDragEnd: function(e) {
			this.pointers.removeClass('focused');
			this.labels.removeClass('focused');
			$(document).off('.slider');
			 var value=document.getElementById("myvalue").value;
			 if(value<20){
				 
				 layer.msg('模糊度不能小于20，请重新选择', {icon: 5,time:2000},function(){
							document.getElementById("e").value = 20;							   
													   
														   });
				   return;
				 }else{
					 
					layer.load(1,{time: 100000});
					
					$.get("/shezhimohu.php",{"value":value,"id":id},function(myre){
							layer.closeAll('loading');	
							
							
							
							  $('#mohu').html('<img src="__ROOT__/images/'+myre+'" style="position:fixed;width:100%;height:80%;"/>');
							
							
																				
						})
					 
					 
					 
					 }
			 
	  //alert(value);
	
		},
		barClicked: function(e) {
			if(this.options.disable) return;
			var x = e.pageX - this.clickableBar.offset().left;
			if (this.isSingle())
				this.setPosition(this.pointers.last(), x, true, true);
			else {
				var pointer = Math.abs(parseInt(this.pointers.first().css('left'), 10) - x + this.pointers.first().width() / 2) < Math.abs(parseInt(this.pointers.last().css('left'), 10) - x + this.pointers.first().width() / 2) ?
					this.pointers.first() : this.pointers.last();
				this.setPosition(pointer, x, true, true);
			}
		},
		onChange: function(e, self, pointer, position) {
			var min, max;
			if (self.isSingle()) {
				min = 0;
				max = self.domNode.width();
			} else {
				min = pointer.hasClass('high') ? self.lowPointer.position().left + self.lowPointer.width() / 2 : 0;
				max = pointer.hasClass('low') ? self.highPointer.position().left + self.highPointer.width() / 2 : self.domNode.width();
			}
			var value = Math.min(Math.max(position, min), max);
			self.setPosition(pointer, value, true);
			
			
		},
		setPosition: function(pointer, position, isPx, animate) {
			var leftPos,
				lowPos = this.lowPointer.position().left,
				highPos = this.highPointer.position().left,
				circleWidth = this.highPointer.width() / 2;
			if (!isPx) {
				position = this.prcToPx(position);
			}
			if (pointer[0] === this.highPointer[0]) {
				highPos = Math.round(position - circleWidth);
			} else {
				lowPos = Math.round(position - circleWidth);
			}
			pointer[animate ? 'animate' : 'css']({
				'left': Math.round(position - circleWidth)
			});
			if (this.isSingle()) {
				leftPos = 0;
			} else {
				leftPos = lowPos + circleWidth;
			}
			this.bar[animate ? 'animate' : 'css']({
				'width': Math.round(highPos + circleWidth - leftPos),
				'left': leftPos
			});
			this.showPointerValue(pointer, position, animate);
			this.isReadonly();
		},
		// will be called from outside
		setValue: function(value) {
			var values = value.toString().split(',');
			this.options.value = value;
			
			
			var prc = this.valuesToPrc(values.length === 2 ? values : [0, values[0]]);
			if (this.isSingle()) {
				this.setPosition(this.highPointer, prc[1]);
			} else {
				this.setPosition(this.lowPointer, prc[0]);
				this.setPosition(this.highPointer, prc[1]);
			}
		},
		renderScale: function() {
			var s = this.options.scale || [this.options.from, this.options.to];
			var prc = Math.round((100 / (s.length - 1)) * 10) / 10;
			var str = '';
			for (var i = 0; i < s.length; i++) {
				str += '<span style="left: ' + i * prc + '%">' + (s[i] != '|' ? '<ins>' + s[i] + '</ins>' : '') + '</span>';
			}
			this.scale.html(str);

			$('ins', this.scale).each(function() {
				$(this).css({
					marginLeft: -$(this).outerWidth() / 2
				});
			});
		},
		getBarWidth: function() {
			var values = this.options.value.split(',');
			if (values.length > 1) {
				return parseInt(values[1], 10) - parseInt(values[0], 10);
			} else {
				return parseInt(values[0], 10);
			}
		},
		showPointerValue: function(pointer, position, animate) {
			var label = $('.pointer-label', this.domNode)[pointer.hasClass('low') ? 'first' : 'last']();
			var text;
			var value = this.positionToValue(position);
			if ($.isFunction(this.options.format)) {
				var type = this.isSingle() ? undefined : (pointer.hasClass('low') ? 'low' : 'high');
				text = this.options.format(value, type);
			} else {
				text = this.options.format.replace('%s', value);
			}

			var width = label.html(text).width(),
				left = position - width / 2;
			left = Math.min(Math.max(left, 0), this.options.width - width);
			label[animate ? 'animate' : 'css']({
				left: left
			});
			
		
			this.setInputValue(pointer, value);
			
			
		},
		valuesToPrc: function(values) {
			var lowPrc = ((values[0] - this.options.from) * 100 / this.interval),
				highPrc = ((values[1] - this.options.from) * 100 / this.interval);
			return [lowPrc, highPrc];
			
		},
		prcToPx: function(prc) {
			return (this.domNode.width() * prc) / 100;
		},
		positionToValue: function(pos) {
			var value = (pos / this.domNode.width()) * this.interval;
			value = value + this.options.from;
				
			return Math.round(value / this.options.step) * this.options.step;
			
		},
		setInputValue: function(pointer, v) {
			// if(!isChanged) return;
			if (this.isSingle()) {
				this.options.value = v.toString();
			} else {
				var values = this.options.value.split(',');
				if (pointer.hasClass('low')) {
					this.options.value = v + ',' + values[1];
				} else {
					this.options.value = values[0] + ',' + v;
				}
			}
			if (this.inputNode.val() !== this.options.value) {
				this.inputNode.val(this.options.value);
				this.options.onstatechange.call(this, this.options.value);
			}
		},
		getValue: function() {
			
			return this.options.value;
			
		},
		isReadonly: function(){
			this.domNode.toggleClass('slider-readonly', this.options.disable);
		},
		disable: function(){
			this.options.disable = true;
			this.isReadonly();
		},
		enable: function(){
			this.options.disable = false;
			this.isReadonly();
		},
		toggleDisable: function(){
			this.options.disable = !this.options.disable;
			this.isReadonly();
		}
	};

	

	var pluginName = 'jRange';

	$.fn[pluginName] = function(option) {
		var args = arguments,
			result;

		this.each(function() {
			var $this = $(this),
				data = $.data(this, 'plugin_' + pluginName),
				options = typeof option === 'object' && option;
			if (!data) {
				$this.data('plugin_' + pluginName, (data = new jRange(this, options)));
				$(window).resize(function() {
					data.setValue(data.getValue());
				}); // Update slider position when window is resized to keep it in sync with scale
			}
			
			if (typeof option === 'string') {
			
				result = data[option].apply(data, Array.prototype.slice.call(args, 1));
			}
		});

		// To enable plugin returns values
		return result || this;
	};

})(jQuery, window, document);// JavaScript Document


function aa(){

         var id="{$id}";
	
		 var value=document.getElementById("myvalue").value;
			 if(value<20){
				 
				 layer.msg('模糊度不能小于20，请重新选择', {icon: 5,time:2000});
				   return;
				 }else{
					 
					layer.load(1,{time: 100000});
					
					$.get("/shezhimohu.php",{"value":value,"id":id},function(myre){
							layer.closeAll('loading');	
							
							  $('#mohu').html('<img src="__ROOT__/images/'+myre+'" style="position:fixed;width:100%;height:80%;"/>');
							
							
																				
						})
					 
					 
					 
					 }
	
	
	}


</script>
<style>
   .yincang{display:none;}
</style>

</head>
<body>
<!--底部开始-->
<div id="mohu"><img src="__ROOT__/images/{$re.mohu}" style="position:fixed;width:100%;height:100%;"></div>
<div id="foot1" style="margin-top:10px;">
	<div class="foot1" style="position:relative;text-align:center;">
		<div class="scale_panel" style="margin:30px auto;position:absolute;top:0;bottom:0;right:0 ;left:0;">
			<input type="hidden" id="myvalue"  class="single-slider" value="{$mohudu}"/>
		</div>
    </div>	
    <div class="foot2">
	  <p>(只能输入{$re.suijistart}-{$re.suijiend}元之间)</p>
	</div>
	
	 <div class="foot6">
	  <p><input id="text" type="text" placeholder="不超过10字的描述" style="height:20px;line-height:20px;text-align:center;width:80%;margin-left:5%;"/></p>
	</div>
	<div class="foot3 sj">
		<span>打赏：</span>
		<input type="text"  value="{$re.suijistart}"  oninput="gais()" id="s" name="start" class="btn_money"/>
		<span>元 到</span>
		<input type="text" value="{$re.suijiend}" id="e" name="end"  oninput="gaie()" class="btn_money"/>
		<span>元</span>
	</div>
	<div class="foot3 gd" style="display:none;">
	   <span>固定打赏：</span>
		<input type="text" class="btn_money"  value="{$re.gudingmoney}" name="guding123" oninput="gaiguding()"  id="g" />
		<span>元
	</div>
	
	<div class="foot4">
		<input checked type="checkbox" onChange="dochange()" id="checkbox1" style="margin-right:5px;background:0;border:1px solid #333;" /><span id="suiji1">随机（<span id="start">{$re.suijistart}</span>到<span id="end">{$re.suijiend}</span>元)</span>
		<span id="guding1" class="yincang">固定（<span id="gudingmoney">1元</span>)</span>
	</div>
	<input type="hidden" name="issuiji" value="0" id="issuiji"/>
	<div class="foot5">
		<div style="cursor:pointer;background:#0ebc05;" onClick="dosubmit()" class="btn_money2"/>设置并生成模糊图片</div>
	</div>
</div>


</body>
</html>

<script>
   var issuiji="{$re.type}";
   
   if(issuiji==1){
   
            $('#issuiji').val('1');
			 $('.sj').css('display',"none");
			 $('.gd').css('display',"block");
			document.getElementById("checkbox1").checked=false;
    
   }


</script>


<script>
   
   function dochange(){
   
		   if(document.getElementById("checkbox1").checked){
			 $('#issuiji').val('0');
			 $('.gd').css('display',"none");
			 $('.sj').css('display',"block");
		
			}else{
		     $('#issuiji').val('1');
			 $('.sj').css('display',"none");
			 $('.gd').css('display',"block");
			
			 
		   }
   
   }
   
   
   function gais(){
   
   
   
      var zuidi="{$sys.zuidi}";
	  
	  
      var s=$('#s').val();
	  
	  if(s<zuidi && s!=''){
	  
	      layer.msg('最低价格不能小于'+zuidi, {icon: 5,time:2000});
		
		  
		  return;
	  
	  }
	  
	  $('#start').html(s);
	  
	  
   }
   
   
   function gaie(){
     
	 var s=$('#s').val();
	 var e=$('#e').val();
	 var zuigao="{$sys.zuigao}";
	 
	 if(e<s*1+1*1 && e!=""){
	 
	    layer.msg('最高价格必须大于最低价格1元', {icon: 5,time:2000});
	
	    return;
	 }
	 
	 
	 if(e>99 && e!=""){
	   
	    layer.msg('最高价格不能大于99元', {icon: 5,time:2000});
		
	    return;
	 
	 
	 }
	 
	 $('#end').html(e);
    
   
   
   }
   
   
   function gaiguding(){
   
      var zuidi="{$sys.zuidi}";
   
      var g=$('#g').val();
	  
	  if(g!="" && g<zuidi){
	  
	     layer.msg('固定价格不能小于'+zuidi, {icon: 5,time:2000});
		 
		return;
	  }
	  
	  $('#gudingmoney').html(g+"元");
	  
   
   
   }
   


   function dosubmit(){
      var zuidi="{$sys.zuidi}";
      var g=$('#g').val();
	  var s=$('#s').val();
	  var e=$('#e').val();
	  var text=$('#text').val();
	  
	 
	  
	  var mohudu=$('#myvalue').val();
	  var id="{$id}";
	  
	  
	  
	  if(text.length>10){
	  
	    layer.msg('请输入不要超过10个字的描述');
	    return;
	  }
	  
	    if(document.getElementById("checkbox1").checked){
			  var issuiji=0;
			}else{
		      var issuiji=1;
		   }
	  
	  
	  if(issuiji==0){
	    if(s=="" || s<zuidi){
		  layer.msg('随机价格不能小于'+zuidi, {icon: 5,time:2000});
		  return;
		}
		
		if(e<s*1+1*1){
			  layer.msg('最高价格不能低于最低价格1元', {icon: 5,time:2000});
			  return;
		}
	 }else{
	  
	    if(g<zuidi){
		    layer.msg('固定价格不能小于'+zuidi, {icon: 5,time:2000});
		    return;
		}
	  }
	  
	  
	  if(mohudu<20){
	  
	        layer.msg('模糊度不能小于20', {icon: 5,time:2000});
		    return;
	  
	  }
	
	
     layer.load(1,{time: 100000});
	 $.post("{:U('Shezhi/shengcheng')}",{"gudingmoney":g,"suijistart":s,"suijiend":e,"issuiji":issuiji,"mohudu":mohudu,"id":id,"text":text},function(re){
	    layer.closeAll('loading');	
	    if(re==1){
		
		    layer.alert('您已经设置成功', {icon: 6});
			
			return;
		
		
		}else{
		
		    layer.msg('模糊失败，参数错误', {icon: 5,time:2000});
		    return;
		
		}
	 
	 
	 
	 })
   
     
   
   }

</script>
